<template>
  <div class="tabBar-container">
    <ul>
      <li class="active">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </li>
      <li>
        <i class="fa fa-envira" aria-hidden="true"></i>
        <span>发现</span>
      </li>
      <li>
        <i class="fa fa-cart-plus" aria-hidden="true"></i>
        <span>购物车</span>
      </li>
      <li>
        <i class="fa fa-bars" aria-hidden="true"></i>
        <span>订单</span>
      </li>
      <li>
        <i class="fa fa-user-o" aria-hidden="true"></i>
        <span>我的</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: ""
  }
</script>

<style lang="scss" scoped>
.tabBar-container{
  height: 150px;
  border-top: 1px solid #CCCCCC;
  background-color: antiquewhite;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  overflow: hidden;
  ul{
    margin: 0;
    padding: 0;
    height: 150px;

    display: flex;
    li{
      list-style: none;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      color: #333;
      flex: 1;
      &.active{
        color: forestgreen;
       }
      i{
        font-size: 64px;
      }
      span{
        font-size: 38px;
      }
    }
  }
}
</style>
